<!DOCTYPE html>
<html lang="zh">
<head>
<base href="/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>首页 - 光年(Light Year Admin)后台管理系统模板</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
=
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">

<link href="css/style.min.css" rel="stylesheet">

<link href="css/animate.css" rel="stylesheet">


  <link rel="stylesheet" href="js/jconfirm/jquery-confirm.min.css">
  <!--时间选择插件-->
  <link rel="stylesheet" href="js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css">
  <!--日期选择插件-->
  <link rel="stylesheet" href="js/bootstrap-datepicker/bootstrap-datepicker3.min.css">

</head>
  
<body data-theme="dark">
<div class="lyear-layout-web">
  <div class="lyear-layout-container">
    <jsp:include page="common.html"/>
    <!--左侧导航-->

    <!--End 头部信息-->
    
    <!--页面主要内容-->
    <main class="lyear-layout-content">
      
      <div class="container-fluid">

        <div class="row">
          <div class="col-lg-12">
            <div class="card">
              <div class="card-toolbar clearfix">
              <form class="pull-right search-bar" method="get" action="#!" role="form">
                <div class="input-group">

                  <input type="text" class="form-control" id="enameInput" placeholder="请输入名称" oninput="findAllPage(1)">
                </div>
              </form>
              <div class="toolbar-btn-action">
                <button id="addBtn" onclick="showAdd()" type="button" class="btn btn-primary m-r-5" href="#!"><i class="mdi mdi-plus"></i> 新增</button>

              </div>

              <div class="card-body">

                <div class="table-responsive" id="employee-table">


                </div>

              </div>
            </div>
          </div>
          </div>
      </div>
      </div>
    </main>
    <!--End 页面主要内容-->
  </div>
</div>
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">添加员工</h4>
      </div>
      <div class="modal-body">
        <form id="AddFrom" class="form-horizontal" action="lyear_forms_elements.html" method="post" onsubmit="return false;">
          <div class="form-group">
            <label class="col-md-3 control-label" for="enameadd">员工姓名</label>
            <div class="col-md-7">
              <input class="form-control" type="text" id="enameadd" name="enameadd" placeholder="请输入员工姓名">
            </div>
          </div>
          <div class="form-group">
            <label class="col-md-3 control-label" for="eageadd">员工年龄</label>
            <div class="col-md-7">
              <input class="form-control" type="text" id="eageadd" name="eageadd" placeholder="请输入员工年龄">
            </div>
          </div>
          <div class="form-group">
            <label class="col-md-3 control-label"  >员工性别</label>
            <div class="col-md-7">
              <input  type="radio" id="man"  name="egenderadd" value="男" > <P for="man">男</P>


              <input  type="radio" id="woman" name="egenderadd" value="女"> <p for="woman">女</p>
            </div>
          </div>
          <div class="form-group">
            <label class="col-md-3 control-label" for="ejobadd">员工工种</label>
            <div class="col-md-7">
              <input class="form-control" type="text" id="ejobadd" name="ejobadd" placeholder="请输入员工工种">
            </div>
          </div>
          <div class="form-group">
            <label class="col-md-3 control-label" for="eentrydateadd">入职日期</label>
            <div class="col-md-7">
              <input id="eentrydateadd" class="form-control js-datepicker m-b-10" type="text" id="example-datepicker" name="eentrydateadd" placeholder="yyyy-mm-dd" value="" data-date-format="yyyy-mm-dd">
            </div>
          </div>
          <div class="form-group">
            <label class="col-md-3 control-label" for="esalary">基本工资</label>
            <div class="col-md-7">
              <input class="form-control" type="number" id="esalary" name="esalary" placeholder="请输入基本工资">
            </div>
          </div>
          <div class="form-group">
            <label class="col-md-3 control-label" >部门名称</label>
            <div class="col-md-7" id="employ-dar-select">

            </div>
          </div>

        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" onclick="addEmployee()">确定</button>
      </div>
    </div>
  </div>
</div>

<%--修改模态框--%>
<div class="modal fade" id="UpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="ModalLabel">添加员工</h4>
      </div>
      <div class="modal-body">
        <form id="UpdateFrom" class="form-horizontal" action="lyear_forms_elements.html" method="post" onsubmit="return false;">
          <div class="form-group">
            <label class="col-md-3 control-label" for="enoUpdate">员工工号</label>
            <div class="col-md-7">
              <input class="form-control" type="text" id="enoUpdate" name="enoUpdate" placeholder="请输入员工工号">
            </div>
          </div>
          <div class="form-group">
            <label class="col-md-3 control-label" for="enameUpdate">员工姓名</label>
            <div class="col-md-7">
              <input class="form-control" type="text" id="enameUpdate" name="enameUpdate" placeholder="请输入员工姓名">
            </div>
          </div>
          <div class="form-group">
            <label class="col-md-3 control-label" for="eageUpdate">员工年龄</label>
            <div class="col-md-7">
              <input class="form-control" type="text" id="eageUpdate" name="eageUpdate" placeholder="请输入员工年龄">
            </div>
          </div>
          <div class="form-group">
            <label class="col-md-3 control-label"  >员工性别</label>
            <div class="col-md-7">
              <input  type="radio"  id="men"  name="egenderUpdate" value="男" > <P for="man">男</P>


              <input  type="radio" id="women" name="egenderUpdate" value="女"> <p for="woman">女</p>
            </div>
          </div>
          <div class="form-group">
            <label class="col-md-3 control-label" for="ejobUpdate">员工工种</label>
            <div class="col-md-7">
              <input class="form-control" type="text" id="ejobUpdate" name="ejobUpdate" placeholder="请输入员工工种">
            </div>
          </div>
          <div class="form-group">
            <label class="col-md-3 control-label" for="eentrydateUpdate">入职日期</label>
            <div class="col-md-7">
              <input id="eentrydateUpdate" class="form-control js-datepicker m-b-10" type="text"  name="eentrydateUpdate" placeholder="yyyy-mm-dd" value="" data-date-format="yyyy-mm-dd">
            </div>
          </div>
          <div class="form-group">
            <label class="col-md-3 control-label" for="esalaryUpdate">基本工资</label>
            <div class="col-md-7">
              <input class="form-control" type="number" id="esalaryUpdate" name="esalaryUpdate" placeholder="请输入基本工资">
            </div>
          </div>
          <div class="form-group">
            <label class="col-md-3 control-label" >部门名称</label>
            <div class="col-md-7" id="employ-dar-selectq">

            </div>
          </div>

        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" onclick="updateemployee()">确定</button>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>

<!--图表插件-->
<script type="text/javascript" src="js/Chart.js"></script>
<script  src="js/template-web.js"></script>
<!--对话框-->
<script src="js/jconfirm/jquery-confirm.min.js"></script>
<script src="js/bootstrap-notify.min.js"></script>

<script type="text/javascript" src="js/lightyear.js"></script>

<!--时间选择插件-->
<script src="js/bootstrap-datetimepicker/moment.min.js"></script>
<script src="js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script src="js/bootstrap-datetimepicker/locale/zh-cn.js"></script>
<!--日期选择插件-->
<script src="js/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script src="js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>


<script type="text/html" id="all_employee">
  <table class="table table-hover" >

    <tr>
      <th>id</th>
      <th>员工工号</th>
      <th>员工姓名</th>
      <th>员工年龄</th>
      <th>员工性别</th>
      <th>员工职位</th>
      <th>入职日期</th>
      <th>基本工资</th>
      <th>在职情况</th>
      <th>部门名称</th>
      <th>操作</th>

    </tr>


    {{each data.list}}
    <tr>
      <th scope="row">{{$value.eid}}</th>
      <td>{{$value.eno}}</td>
      <td>{{$value.ename}}</td>
      <td>{{$value.eage}}</td>
      <td>{{$value.egender}}</td>
      <td>{{$value.ejob}}</td>
      <td>{{$value.eentrydate}}</td>
      <td>{{$value.esalary}}</td>
      <td>

        {{if $value.estate == '1'}}
        <span class="label label-primary">在职</span>
        {{else}}
        <span class="label label-default">离职</span>
        {{/if}}
        <%--{{$value.estate}}--%>
      </td>
      <td>{{$value.dname}}</td>
      <td>
        {{if $value.estate == '1'}}
        <button type="button" class="btn btn-info btn-xs" onclick="showUpdate('{{$value.eid}}')">修改</button>
        <button type="button" class="btn btn-danger btn-xs" onclick="dalete('{{$value.eid}}','{{data.currentPage}}')" >删除</button>
        {{else}}
        <button type="button" class="btn btn-info btn-xs" disabled="disabled"  >修改</button>
        <button type="button" class="btn btn-danger btn-xs"  disabled="disabled">删除</button>
        {{/if}}

      </td>
    </tr>
    {{/each}}


  </table>
  <nav class="text-center">
    <ul class="pagination pagination-circle">
      <%--上一页--%>
      {{if data.hasPrePage}}
      <li ><a href="javascript:void(0)" onclick="findAllPage('{{data.currentPage-1}}')"><span><i class="mdi mdi-chevron-left"></i></span></a></li>
      {{else}}
      <li class="disabled"><a href="javascript:void(0)" ><span><i class="mdi mdi-chevron-left"></i></span></a></li>
      {{/if}}
      <%--标签--%>
      {{each data.navigation}}
      {{if $value == data.currentPage}}
      <li class="disabled"><a href="javascript:void(0)" >{{$value}}</a></li>
      {{else}}
      <li><a href="javascript:void(0)" onclick="findAllPage('{{$value}}')">{{$value}}</a></li>
      {{/if}}
      {{/each}}
      <%--  下一页--%>
      {{if data.hasNextPage}}
      <li><a href="javascript:void(0)" onclick="findAllPage('{{data.currentPage+1}}')"><span><i class="mdi mdi-chevron-right"></i></span></a></li>
      {{else}}
      <li class="disabled"><a href="javascript:void(0)" ><span><i class="mdi mdi-chevron-right"></i></span></a></li>
      {{/if}}

    </ul>
  </nav>
</script>
<script type="text/html" id="example-select">
  <select class="form-control"  id="did" name="didadd" size="1">
    {{each data}}

    <option value="{{$value.did}}" >{{$value.dname}}</option>
    {{/each}}
  </select>
  </script>

<script type="text/html" id="example-select2">
  <select class="form-control"   name="didUpdate" size="1">
    {{each data}}

    <option value="{{$value.did}}" >{{$value.dname}}</option>
    {{/each}}
  </select>
</script>
<script type="text/javascript">
  var eidupdate = 0;
  //按钮添加
  function addEmployee(){
    var serialize = $("#AddFrom").serialize();
    console.log(serialize)
    $.ajax({
      url:"admin/employeeController?action=addEmployee",
      type:'POST',
      data:$("#AddFrom").serialize(),
      dataType:'JSON',
      success:function (resp){
        if(resp.code==10000){
          $("#addModal").modal("hide")
          //清空数据
          $("#AddFrom")[0].reset();
          lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center' );
          findAllPage(1);
        }else{
          lightyear.notify(resp.msg, 'danger', 1000, 'mdi mdi-emoticon-sad', 'top', 'center');
        }
      }
    })
  }
  //删除数据
  function dalete(eid,currentPage){
    $.alert({
      title: '删除',
      content: '您确认要删除吗',
      buttons: {
        confirm: {
          text: '确认',
          btnClass: 'btn-primary',
          action: function(){

            $.ajax({
              url:"admin/employeeController?action=deleteEmp",
              type:'POST',
              data: {eid:eid},
              dataType:'JSON',
              success:function (resp){
                if(resp.code==10000){
                  lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center' );

                  findAllPage(currentPage);
                }else{
                  lightyear.notify(resp.msg, 'danger', 1000, 'mdi mdi-emoticon-sad', 'top', 'center');
                }
              }
            })
          }
        },
        cancel: {
          text: '取消'
        }
      }
    });

  }
  function showAdd(){

    $.ajax({
      url:"admin/DepartmentController?action=findAll",
      type:'POST',
      dataType:'JSON',
      success:function (resp){
        if(resp.code==10000){
          console.log(resp)
          //渲染数据
          let sel = template('example-select', {data:resp.data});
          //挂在
          $("#employ-dar-select").html(sel);
          $("#addModal").modal("show")

        }else{
          lightyear.notify(resp.msg, 'danger', 1000, 'mdi mdi-emoticon-sad', 'top', 'center');
        }
      }
    });
  }
  function updateemployee(){
    var serialize = $("#UpdateFrom").serialize();
    console.log(serialize)
    console.log("eid=" + eidupdate + "&" + serialize)
    $.ajax({
      url:"admin/employeeController?action=upemployee",
      type:'POST',
      data: "eid=" + eidupdate + "&" + serialize,
      dataType:'JSON',
      success:function (resp){
        if(resp.code==10000){
          console.log(serialize)
          $("#UpdateModal").modal("hide")
          //清空数据
          $("#UpdateFrom")[0].reset();
          lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center' );
          findAllPage(1)
        }else{
          lightyear.notify(resp.msg, 'danger', 1000, 'mdi mdi-emoticon-sad', 'top', 'center');
        }
      }
    })
  }

  function showUpdate(eid){

    $.ajax({
      url:"admin/DepartmentController?action=findAll",
      type:'POST',

      dataType:'JSON',
      success:function (resp){
        $.ajax({
          url:"admin/employeeController?action=findById",
          type:'POST',
          data: {eid:eid},
          dataType:'JSON',
          success:function (resp){
            eidupdate = resp.data.eid
            if(resp.code==10000) {
              $("#enoUpdate").val(resp.data.eno)
              $("#enameUpdate").val(resp.data.ename)
              $("#eageUpdate").val(resp.data.eage)
              $("#egenderUpdate").text(resp.data.egender)
              if (resp.data.egender == "男"){
                $("#men").prop("checked" ,true)
              }else {
                $("#women").prop("checked" ,true)
              }
              $("#ejobUpdate").val(resp.data.ejob)
              //$("#eentrydateUpdate").val(resp.data.eentrydate)
              var entryDate = new Date(resp.data.eentrydate);
              var formattedDate = entryDate.getFullYear() + '-' + ('0' + (entryDate.getMonth() + 1)).slice(-2) + '-' + ('0' + entryDate.getDate()).slice(-2);
              $("#eentrydateUpdate").val(formattedDate);
              $("#esalaryUpdate").val(resp.data.esalary)
              $("#UpdateFrom select option[value = "+ resp.data.did +"]").prop("selected",true)
              $("#updateModal").modal("show")
            }else{
              lightyear.notify(resp.msg, 'danger', 1000, 'mdi mdi-emoticon-sad', 'top', 'center');
            }
          }
        })
        if(resp.code==10000){

          console.log(resp)
          //渲染数据
          let sel = template('example-select2', {data:resp.data});
          //挂在
          $("#employ-dar-selectq").html(sel);
          $("#UpdateModal").modal("show")

        }else{
          lightyear.notify(resp.msg, 'danger', 1000, 'mdi mdi-emoticon-sad', 'top', 'center');
        }
      }
    });
  }
  function UpdateEmployee(){
    var serialize = $("#UpdateFrom").serialize();
    console.log(serialize)
    $.ajax({
      url:"admin/employeeController?action=upEmployee",
      type:'POST',
      data:$("#UpdateFrom").serialize(),
      dataType:'JSON',
      success:function (resp){
        if(resp.code==10000){
          $("#UpdateModal").modal("hide")
          //清空数据
          $("#UpdayeFrom")[0].reset();
          lightyear.notify(resp.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'center' );
          findAllPage(1);
        }else{
          lightyear.notify(resp.msg, 'danger', 1000, 'mdi mdi-emoticon-sad', 'top', 'center');
        }
      }
    })
  }

  function findAllPage(pagecou){
    //发送ajax请求
    $.ajax({
      url:"admin/employeeController?action=findbypage",
      type:'POST',
      dataType:'JSON',
      data: {pagecou:pagecou,ename:$("#enameInput").val()},
      success:function (resp){
          //渲染数据
          let table = template('all_employee', {data:resp.data});
          //挂在
          $("#employee-table").html(table);
      }
    });
  }
  findAllPage(1)
</script>
</body>
</html>